<template>
	<view class="nav-bar pc">
		<!-- #ifdef H5 -->
		<view v-for="item in rawData" :key="'one' + item.id" class="nav-item">
			<view class="nav-ttl">
				<view @click="navToList(item.id)" class="link">{{item.name}}</view>
			</view>
			<view v-if="item.twoList[0]" class="nav-link">
				<block v-for="twoItem in item.twoList" :key="'two' + twoItem.id">
					<text @click="navToList(twoItem.id)" class="link">{{twoItem.name}}</text>
				</block>
			</view>
			<view class="nav-hover">
				<view v-for="twoItem in item.twoList" :key="'two' + twoItem.id" class="nav-list">
					<view class="list-left">
						<view class="link">{{twoItem.name}}</view>
					</view>
					<view v-for="threeItem in twoItem.threeList" :key="'three' + threeItem.id" class="list-right">
						<view @click="navToList(threeItem.id)" class="link">{{threeItem.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rawData: []
			}
		},
		name: 'uni-nav',
		mounted() {
			this.loadData()
		},
		methods: {
			loadData() {
				this.$api.request('/categoty/getTotal', {}, {
					method: 'GET'
				}).then(res => {
					this.rawData = res.data
					console.log(this.rawData)
				})
			},
			navToList(id) {
				uni.navigateTo({
					url: `/pages/product/list?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.nav-bar {
			.nav-item {
				position: relative;
				z-index: 999;
				padding: 10px;
				background-color: #fff;
				border-top: 1px solid $base-color-light;

				&:first-child {
					border: 0;
				}

				&:hover {
					background: linear-gradient(to right, #6797fc, #6700f4);

					.nav-hover {
						display: block;
					}

					.nav-ttl,
					.nav-link .link {
						color: #fff;
						cursor: pointer;
					}
				}
			}

			.nav-hover {
				overflow: hidden;
				position: absolute;
				left: 100%;
				top: 0;
				display: none;
				padding: 20px 20px 5px;
				width: 400px;
				background-color: #fff;
				// transition: all 0.3s linear;
			}

			.nav-ttl {
				display: block;
				padding-left: 10px;
				font-size: 16px;
			}

			.nav-link {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10px;

				.link {
					margin-right: 14px;
					font-size: 14px;
					color: $base-color-light;
				}
			}

			.nav-list {
				margin-bottom: 15px;
				display: flex;

				.list-left {
					position: relative;
					z-index: 100;
					padding: 0 20px;
					min-width: 100px;
					font-size: 16px;
					font-weight: bold;
					color: #000;
					line-height: 30px;
					background-color: #fff;
				}

				.list-right {
					display: flex;
					flex-wrap: wrap;

					.link {
						position: relative;
						margin-right: 20px;
						font-size: 14px;
						color: $base-color-light;
						line-height: 30px;
						cursor: pointer;

						&:first-child:before {
							display: none;
						}

						&:before {
							position: absolute;
							left: -10px;
							top: 7px;
							content: '';
							width: 1px;
							height: 16px;
							background-color: $base-color-light;
						}
					}
				}
			}
		}
	}

	/* #endif */
</style>
